<route lang="json5" type="page">
{
  layout: 'main',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '信息修改',
  },
}
</route>

<template>
  <div class="user-info-form">
    <h2 class="form-title">编辑个人信息</h2>
    <div class="form-item">
      <wd-input v-model="userInfo.username" placeholder="请输入姓名" clearable />
    </div>
    <div class="form-item">
      <wd-input v-model="userInfo.phone" type="number" placeholder="请输入手机号" clearable />
    </div>
    <div class="form-item">
      <wd-input v-model="userInfo.email" type="email" placeholder="请输入邮箱" clearable />
    </div>
    <div class="form-item">
      <wd-button type="primary" block @click="updateUserinfo">保存修改</wd-button>
    </div>
    <wd-toast />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { useToast } from 'wot-design-uni'

const toast = useToast()

// 设置组件的data
const userInfo = reactive({
  username: '',
  phone: '',
  email: '',
})

const updateUserinfo = () => {
  // 这里实现更新用户信息的逻辑,比如调用API
  toast.success('更新成功')
  uni.navigateBack()
}
</script>
<style lang="scss" scoped>
.user-info-form {
  max-width: 480px; // 增加最大宽度，提高适应性
  padding: 24px;
  margin: 40px auto;
  background-color: #fff; // 修改为纯白背景
  border: 1px solid #ebebeb; // 边框设置，更加精细
  border-radius: 10px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%); // 轻微阴影效果

  .form-title {
    margin-bottom: 30px;
    font-weight: bold;
    color: #333; // 标题颜色
    text-align: center; // 标题居中
  }

  .form-item {
    margin-bottom: 24px;

    .wd-input,
    .wd-button {
      height: 44px; // 输入框和按钮的高度
      border-radius: 22px; // 圆角效果
    }

    .wd-button {
      font-size: 18px; // 按钮字体大小
      border-radius: 22px; // 统一圆角大小
    }
  }
}
</style>
